<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Cookie Store</title>
</head>

<body>
    <div class="container">
        <h1>Mateusz's Cookie Store</h1>
        <h4>Your funds: ${{ money }}</h4>
        <div class="row">
            {% for cookie in cookies %}
            <div class="col">
                <div class="card">
                    <img src="/static/{{ cookie.image }}" class="card-img-top">
                    <div class="card-body">
                        <h5 class="card-title">{{ cookie.name }}</h5>
                        <div class="card-text">
                            <p>{{ cookie.description }}</p>
                            <p>Price: ${{ cookie.price }}</p>
                        </div>
                        <form action="/buy" method="POST">
                            <input type="hidden" class="form-control" name="id" value="{{ loop.index-1 }}">
                            <button type="submit" class="btn btn-primary">Buy</button>
                        </form>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>

        <h5 class="mt-3">Inventory:</h5>
        <ul class="list-group mt-2">
            {% for item in history %}
            <li class="list-group-item">{{ item }}</li>
            {% endfor %}
        </ul>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous"></script>
</body>

</html>